<template>
	<view class="box">
		<!-- 主页面渲染 -->
		<view class="header">
			<view class="image">
				<image src="" mode=""></image>
			</view>
			<view class="name" v-for="(item,index) in oldList" :key="index">
				<!-- <view class="text"> 服务承诺： 支付保障 · 学前随时退 · 不限时间 </view> -->
				<view class="title">{{item.title}}  {{item.id}}</view>
				<view class="study">有[<text>{{item.num}}</text>]人已习</view>
				<!-- 如果这里是课程的 -->
				<view class="bottom-price">
					<!-- <view class="view">价格：<text class="price">{{item.price}}</text></view> -->
				</view>
			</view>

			<view class="content" v-for="(item,id) in contentList" :key="id+1">
				<text class="left">logo{{item.name}}</text>
				<view class="right">
					课程数:[<text class="right-text">{{item.text}}</text>]
				</view>
				
			</view>
		</view>

		<!-- 选项卡 -->
		<!-- <view class="ct_tab">
			<view class="ct_item" :class="{'ct_active' : 0 == tabCur}" @click="clickCtTab(0)">
				<text>课程概述</text>
			</view>
			<view class="ct_item" :class="{'ct_active' : 1 == tabCur}" @click="clickCtTab(1)">
				<text>课程目录</text>
			</view>
			<view class="ct_item" :class="{'ct_active' : 2 == tabCur}" @click="clickCtTab(2)">
				<text>课程评论</text>
			</view>
		</view>
		<view class="ct_bottom">
			<text :class="tabCur === 1">qoiweqwioeiqheq</text>
		</view> -->

		<view class="warehousingToBeCon">
			<!-- nav -->
			<view class="nav">
				<view class="flex_between">
					<view class="nav_title">
						<view :class="{'active':isActive==1}" @click="chenked(1)">
							课程概述
						</view>
					</view>
					<view class="nav_title">
						<view :class="{'active':isActive==2}" @click="chenked(2)">
							课程目录
						</view>
					</view>
					<view class="nav_title">
						<view :class="{'active':isActive==3}" @click="chenked(3)">
							课程记录
						</view>
					</view>
					<!-- <view class="nav_title">
						<view :class="{'active':isActive==4}" @click="chenked(4)">
							课程记录
						</view>
					</view> -->
				</view>
			</view>
			<!-- nav-item -->
			<view class="nav_item" v-if="isActive==1">
				<text>尊老敬老是中华民族的传统美德，也是全面贯彻落实科学发展观、构建和谐社会的重要内容。经常开展敬老宣传教育活动，对增强全社会的老龄意识和敬老意识，营造敬老养老助老的浓厚氛围，激发老年人发挥余热、奉献社会的热情，促进全市经济社会更好更快发展具有重要意义。</text>
				<!-- <image src="../../public/static/login-pic.png" mode=""></image> -->
			</view>
			<!-- 视频课程 -->
			<view class="nav_item" v-if="isActive==2">
				<view class="Bottom-child"> </view>
				<view class="nav_item_text"  v-for="(item,index) in textList" :key='index+2' >
					<text class="Bottom-text" @click="oldvideo(item.id)">{{item.text}}</text>
					<!-- :class="{active:item.id}" -->
				</view>
			</view>
			<!-- /视频课程 -->
			<view class="nav_item" v-if="isActive==3">
				暂无记录333
			</view>
			<!-- <view class="nav_item" v-if="isActive==4">
				暂无记录
			</view> -->
		</view>
		
		
		<!-- 价格与报名 -->
		<view class="button">
			<!-- 之前这里是课程的价格 -->
			<text class="text" @click="button">报名学习</text>
		</view>
		
		<!-- <rfLoading isFullScreen :active="loading"></rfLoading> -->
		
		<!-- 底部 -->
		<view class="bottom">
			<!-- 版权所有 -->
			<view class="login-type-top">专注中国养老事业</view>
			<view class="login-type-bottom" :class="'text-' + themeColor.name">
				{{ appName }} 版权所有 logo
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 版本所有
				appName: this.$mSettingConfig.appName,
				
				
				oldList: [{
					title: '芥子园画谱之画石法',
					num: '11111',
					price: '免费',
					id:''
				}, ],
				contentList: [{
					name: '老年开放大学',
					text: '10'
				}],
				isActive: 1,
				textList: 
				[
					{
						text:'视频1',
						id:'0'
					},
					{
						text:'视频2',
						id:'1'
					},
					{
						text:'视频3',
						id:'2'
					}
				]
			}
		},
		methods: {
			button(index) {
				uni.showToast({
					title: '你点击了报名！',
				})
				
			},
			chenked(type) {
				this.isActive = type
			},
			// 弹跳视频页面
			oldvideo(id,index){
				console.log(id)
				uni.navigateTo({ //点击跳转的方法
					url:'/pages/oldxue/oldBox/oldvideo?id='+id //需要跳转的页面路径，使用问号进行id的传值，然后再拼接一个要传入的id
				})
			}
		},
		onLoad(options) {
			this.id = options.id;
			console.log('传过来的id值为：' + options.id);
			// let that = this
			// uni.request({
			// url:`${this.$serverUrl}/pages/oldxue/oldBox/oldvideo/${this.id}/`,
			// header:{
			// 'Authorization': this.uerInfo.token
			// },
			// success(res){
			// console.log(res)
			// that.opportunity = res.data;
			// }
			// })
		}
	}
</script>

<style scoped>
	page{
		background-color: #eee;
		font-family: '宋体';
		font-weight: 555;
	}
	.warehousingToBeCon {
		width: 100%;
		margin-top: 180px;
		background-color: #f2f2f2;
	}

	.nav {
		border-top: 1rpx solid #f2f2f2;
		background-color: #fff;
	}

	.flex_between {
		margin-top: 10upx;
		display: flex;
	}

	.nav_title {
		height: 88rpx;
		line-height: 88rpx;
		width: 100%;
		text-align: center;
		font-family: "PingFang";
		color: rgb(102, 102, 102);
		margin-top: 20upx;
	}

	.active {
		margin: 0 10upx 10upx 10upx;
		position: relative;
		/* top: 10upx; */
		font-size: 16px;
		background-color: #007AFF;
		border-radius:0 10px 0 10px ;
		/* color: #31d378; */
		color: #fff;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #31d378;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;

	}
	.nav_item{
		background-color: #fff;	
	}
	
	.nav_item_text{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 10upx;
	}
	
/* 	.nav_item{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20upx;
	} */
	
	.nav_item text{
		font-size: 16px;
		/* text-align: center; */
		display: flex;
		justify-content: center;

	}
	.nav_item image{
		width: 100%;
		height: 350px;
		z-index: 2;
	}
	/* ----- */
	.header {
		width: 100%;
		height: 200px;
		margin-bottom: 20upx;
	}

	.image {
		width: 100%;
		height: 100%;
		border-radius: 2%;
		background-color: #666;
		margin-top: 20upx;
	}

	.header .name {
		height: 20px;
	}

	.header .study text{
		color: #31d378;
		border-bottom: 2px solid #ADADAD;
	}

	.content {
		width: 100%;
		height: 80px;
		margin-top: 60px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}

	.content .left {
		font-size: 18px;
		/* margin-left: 10px; */
		text-align: center;
		line-height: 80px;
	}

	.content .right {
		/* text-align: center; */
		line-height: 80px;
	}

	.content .right-text{
		color: #31d378;
	}

/* 	.name .text {
		display: flex;
		justify-content: space-evenly;
		color: #0081FF;
	} */

	.name .title {
		margin-top: 10upx;
		font-size: 18px;
	}

	/* 按钮 */
	.button {
		position: fixed;
		bottom: 0;
		/* margin-top: 100upx; */
		width: 100%;
		height: 50px;
		z-index: 10;
	}

	.bottom-price .view{
		margin-top: 10upx;
		font-size: 16px;
	}

	/* 价格的样式 */
	.bottom-price .price {
		width: 100%;
		font-size: 18px;
		color: red;
		/* background-color: #fff; */
	}
	
	/* 视频跳转的样式 */
	.Bottom-text{
		padding: 5px 50px 5px 50px;
		color: #fff;
		background-color: #007AFF;
		border-radius: 0 10px 0 10px;
		margin-bottom: 5upx;
	}

	/* 底部按钮的样式 */
	.button .text {
		height: 100%;
		color: #fff;
		border-radius:10% 10% 0 0 ;
		font-size: 18px;
		display: flex;
		display: inherit;
		justify-content: space-evenly;
		line-height: 50px;
		text-align: center;
		align-items: center;
		background-color: #197DE0;
	}
	
	/* 底部logo显示 */
	.bottom{
		padding-bottom: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	
</style>
